<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .modal {
        /* 半透明 铺满窗口 */
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        display: none;
      }
      .modal .modal-box {
        width: 500px;
        min-height: 300px;
        background: white;
        position: relative;
        padding: 20px;
      }

      .modal .modal-box .close {
        background: transparent;
        border: none;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
      }
      .modal .modal-box .close:hover {
        border: solid 1px;
      }
    </style>
  </head>
  <body>
    <button>添加</button>
    <div id="tableBox"></div>

    <div class="modal" id="editModal">
      <div class="modal-box">
        <button
          class="close"
          data-modal-action="close"
          data-modal-id="editModal"
        >
          X
        </button>

        <form name="editForm">
          <input type="text" name="id" hidden />
          <p>姓名 <input type="text" name="username" /></p>
          <p>年龄 <input type="text" name="age" /></p>
          <p>邮箱 <input type="text" name="email" /></p>
          <p>
            <button data-form-action="editSave" type="button">保存</button>
            <button
              type="button"
              data-modal-action="close"
              data-modal-id="editModal"
            >
              取消
            </button>
          </p>
        </form>
      </div>
    </div>
    <script>
      const users = [
        { id: 1, username: "jack", age: 20, email: "jack@qq.com" },
        { id: 2, username: "lili", age: 21, email: "lili@qq.com" },
      ];

      function readerTable(data) {
        const trs = data
          .map(
            (el) => `
          <tr>
            <td>${el.id}</td>
            <td>${el.username}</td>
            <td>${el.age}</td>
            <td>${el.email}</td>
            <td>
              <button data-action="del" data-id="${el.id}">删除</button>
              <button data-modal-action="editOpen" data-modal-id="editModal" data-id="${el.id}" >编辑</button>
            </td>
          </tr>
          `
          )
          .join("");
        return `
        <table border="1">
          <thead>
            <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>邮箱</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
           ${trs}
          </tbody>
        </table>
        `;
      }

      tableBox.innerHTML = readerTable(users);

      document.onclick = function (e) {
        const target = e.target;
        const action = target.dataset.action;
        if (action === "del") {
          if (confirm("确定删除吗") === false) {
            return;
          }
          // 根据ID删除数据
          const id = target.dataset.id;
          // 根据ID找到索引
          const index = users.findIndex((el) => el.id === id);
          // 删除数据
          users.splice(index, 1);
          // 重新渲染表格
          tableBox.innerHTML = readerTable(users);
        }
      };

      // 编辑
      const editForm = document.editForm;

      document.addEventListener("click", function (e) {
        const target = e.target;
        const action = target.dataset.modalAction;
        if (action === undefined) {
          return;
        }

        if (action === "close") {
          const el = document.getElementById(target.dataset.modalId);
          el.style.display = "none";
        }

        if (action === "editOpen") {
          const el = document.getElementById(target.dataset.modalId);
          el.style.display = "flex";
          // 数据回填
          const id = target.dataset.id;
          // 根据ID获取数据对象
          const user = users.find((el) => el.id === +id);
          // 将数据回填到表单
          editForm.username.value = user.username;
          editForm.age.value = user.age;
          editForm.email.value = user.email;
          editForm.id.value = user.id;
        }
      });

      editForm.onclick = function (e) {
        const target = e.target;
        const action = target.dataset.formAction;
        if (action === undefined) {
          return;
        }
        if (action === "editSave") {
          // 获取用户表单输入
          const data = {
            id: editForm.id.value,
            username: editForm.username.value,
            age: editForm.age.value,
            email: editForm.email.value,
          };
          // 根据id找到要更新的数据
          const user = users.find((el) => el.id === +data.id);
          user.username = data.username;
          user.age = data.age;
          user.email = data.email;
          // 重新渲染表格
          tableBox.innerHTML = readerTable(users);
          // 关闭对话框
          editModal.style.display = "none";
        }
      };
    </script>
  </body>
</html>
